<template>
  <div class="site-popup">
    <el-dialog title="站点初始化" :visible.sync="dialogFormVisible" @open="onDialogOpen" @close="onDialogClose">
      <el-form :model="form">
        <el-form-item label="选择项目" :label-width="formLabelWidth">
          <el-select v-model="form.project_id" placeholder="选择项目" style="width: 100%" @change="onSelectProject" >
            <el-option 
              v-for="(prject, index) in projectList"
              :key="index"
              :label="prject.name"
              :value="prject.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择站点" :label-width="formLabelWidth">
          <el-select v-model="form.station_id" placeholder="选择站点" style="width: 100%" >
            <el-option 
              v-for="(item, index) in stationOptions"
              :key="index"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="全站仪编号" :label-width="formLabelWidth">
          <el-input v-model="form.station_number" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-tag
          v-if="tag.status"
          style="margin-right:10px"
          :type="tag.type"
          effect="light">
          {{ tag.msg }}
        </el-tag>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getProjectList } from '@/api/project'
import { getStationList } from '@/api/station'
import { stationIni } from '@/api/cmd'

export default {
  name: "StationPopup",
  data() {
    return {
      formLabelWidth: '120px',
      dialogFormVisible: false,
      form: {
        project_id: [],
        station_id: null,
        station_number: null
      },
      tag:{
        type:'warning',
        status: false,
        msg:'初始化中...'
      },
      
      projectList: [],
      stationOptions: []
    }
  },
  created() {
  },
  methods: {
    show() {
      this.dialogFormVisible = true
    },
    // 项目列表
    getProjectList () {
      getProjectList({ limit: 999 }).then(res => {
        this.projectList = res.data
      })
    },
    // 站点列表
    getStationList () {
      getStationList({ 
        limit: 999,
        project_id: this.form.project_id
      }).then(res => {
        const resData = res.data
        if (resData.length > 0) {
          this.stationOptions = resData.map(res => {
            return { value: res.id, label: `${res.name} (x: ${res.x}, y: ${res.y}, z: ${res.z}, h: ${res.h})` }
          })
        }else{
          this.stationOptions = [];
        }
        console.log(this.stationOptions)
        // resData.forEach(element => {
        //   stationOptions
        // });
      })
    },
    // 选择项目
    onSelectProject (val) {
      this.form.station_id = null
      this.getStationList()
    },
    // 确定
    onSubmit () {
      // this.$emit('onSubmit')
      stationIni({id:this.form.station_id, uid: this.form.station_number, client_id:this.$Ws.id}).then(res => {
        if(res.status == 200){
          this.tag.status = true;
          this.$message({
            type: 'success',
            message: res.message
          })
        }else{
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      });
    },
    onMessage(e) {
      var datas = e.data.split('->')
      console.log(datas)
      switch (datas[0]) {
        case 'success':
          this.tag.type = 'success'
          this.tag.msg = '初始化成功'
        break;
        case 'error':
          this.tag.type = 'danger'
          this.tag.msg = '初始化失败:'+datas[1]
        break;
      }
    },
    onDialogOpen () {
      this.getProjectList()
      var $this = this
      this.$Ws.web_socket.addEventListener('message', this.onMessage)
    },
    onDialogClose(){
      console.log('yc')
      this.$Ws.web_socket.removeEventListener('message', this.onMessage)
    }
  }
}
</script>

<style lang="scss" scoped>
.site-popup {
  display: inline-block;
  line-height: 1.5;
}
</style>
